<template>
  <div class="home">
      <el-container>
        <el-aside width="200px">
          <div class="logo">
            <img src="../assets/logo.png" alt="">
          </div>
          <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      background-color="#000"
      text-color="#fff"
      active-text-color="aqua">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>文章管理</span>
        </template>
          <el-menu-item index="1-1">文章列表</el-menu-item>
          <el-menu-item index="1-2">发布文章</el-menu-item>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>栏目管理</span>
        </template>
          <el-menu-item index="2-1">栏目列表</el-menu-item>
      </el-submenu>
      
    </el-menu>
        </el-aside>
        <el-container>
          <el-header height="80px">
            
            <img :size="50" class="avatar" :src="userinfo.head_img | imgUrl" alt="">
            <span class="nickname">欢迎：{{userinfo.nickname}}</span>
            <el-button type="danger">退出</el-button>
          </el-header>
          <el-main>主要区域容器</el-main>
        </el-container>
      </el-container>
  </div>
</template>

<script>
import {userDetailByIdAPI} from "../apis/user"
import {getUserId} from "../utils/localData"
export default {
   data () {
     return {
       userinfo:"",
     }
   },
   async created () {
     const id=await getUserId()
     console.log(id)
     const res= await userDetailByIdAPI(id)
     console.log(res)
     this.userinfo=res.data.data
   }
}
</script>

<style lang="less" scoped>

.el-container{
  height:100vh;
  
}
  .el-header {
    background-color: #343435;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    
    .avatar{
      width: 50px;
      height: 50px;
      border-radius:50%;
    }
    .nickname {
    margin: 0 15px;
   }
  }
  
  .el-aside {
    background-color: #000;
    color: #fff;
    .logo{
      height: 80px;
      widows: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fff;
    }
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
  }
 
</style>